<template>
  <div class="result-list">
    <div class="community-home">
      <div class="nav-bar">
        <div>
          <a-button class="back-btn" type="link" @click="back"
            ><a-icon type="left"></a-icon>返回</a-button
          >
          <a-divider type="vertical" />
          <strong>{{ searchInput ? '搜索结果' : '查看全部' }}</strong>
        </div>
        <a-input-search
          v-model="searchInput"
          allow-clear
          class="search-input"
          placeholder="搜索算法、模型、教程视频"
        />
      </div>

      <div class="content">
        <a-tabs
          v-model="tabIndex"
          default-active-key="1"
          align="left"
          class="tabs"
        >
          <a-tab-pane
            key="1"
            :tab="`模型&算法（${modellLength}）`"
            force-render
          >
            <model-and-algo
              :type="1"
              :search-input="searchInput"
              class="model-algo"
              @search-keyword="setKeyword"
              @model-length="modelLength"
            />
          </a-tab-pane>
          <a-tab-pane key="2" :tab="`案例（${caselLength}）`" force-render>
            <case-list
              :search-input="searchInput"
              class="model-algo"
              @search-keyword="setKeyword"
              @case-length="caseLength"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ModelAndAlgo from './ModelAndAlgo.vue'
import CaseList from './CaseList.vue'

@Component({
  // components: { },
  components: { ModelAndAlgo, CaseList },
})
export default class PluginResultList extends Vue {
  public tabIndex: any = '1'
  public searchInput: any = ''
  public caselLength: any = 0
  public modellLength: any = 0

  public created() {
    window.scrollTo(0, 0)
    this.searchInput = this.$route?.query?.key
  }

  public activated() {
    this.tabIndex = this.$route?.query?.tab
  }

  public caseLength(value: any) {
    this.caselLength = value
  }

  public modelLength(value: any) {
    this.modellLength = value
  }

  public async setKeyword(value: any) {
    this.searchInput = value
  }

  public back() {
    this.$router.go(-1)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/ .ant-input:hover {
  border-color: #6973ff !important;
}

/deep/ .ant-input:focus {
  border-color: #6973ff !important;
}

/deep/ .ant-tabs-bar {
  margin: 4px 0;
  margin-bottom: 0;
}

.result-list {
  margin: 16px;
  max-height: calc(100vh - 140px);
  min-height: calc(100vh - 140px);

  .community-home {
    height: calc(100vh - 140px);
    width: 100%;

    .nav-bar {
      align-items: center;
      background: #fff;
      display: flex;
      height: 48px;
      justify-content: space-between;
      margin-bottom: 12px;

      .back-btn {
        font-size: 16px;
      }

      strong {
        font-size: 16px;
        margin-left: 8px;
      }

      .search-input {
        margin-right: 28px;
        max-width: 400px;

        /deep/ .ant-input {
          border: 1px solid #e9e9e9;
          border-radius: 24px;
          font-size: 14px;
          height: 32px;
        }
      }
    }

    .content {
      background-color: #fff;
      height: calc(100vh - 200px);
      width: 100%;

      .tabs {
        // padding-left: 52px;
        padding: 0 24px;
      }

      .model-algo {
        height: calc(100vh - 252px);
        // margin-left: -52px;
        // padding: 0 28px;
      }
    }

    .spin {
      padding: 24px;
    }
  }

  .four-scroll-y {
    overflow-y: auto;

    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #888;
    }

    &::-webkit-scrollbar-button {
      background-color: #f1f1f1;
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-corner {
      background: transparent;
    }
  }
}
</style>
